<template>
	<view class="container u-flex flex-column u-row-left" :style="appThemeStyle">
		<u-navbar :border-bottom="false" :title-color="appTheme.mainFg"  :back-icon-color="appTheme.mainFg" :back-text-style={color:appTheme.mainFg} :background="{backgroundColor:appTheme.mainBg}"></u-navbar>
		<view class="logintop u-flex flex-column u-row-center">
			<!-- #ifdef H5 -->
			<view class="u-flex flex-column u-row-center u-col-center">
				<view class="h1 u-text-center">
					欢迎{{ formtype=='login'?'登录':'注册' }}
				</view>
				<u-tabs bg-color="transparent" :active-color="appTheme.mainFg" :inactive-color="appTheme.viceBg" :list="[{name:'密码登录'},{name:'短信登录'}]" :is-scroll="true" v-model="currentMethod" @change="changeMethod" v-if="formtype=='login'"></u-tabs>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view v-show="form.openid != ''">
				<view class="h1">
					欢迎登录
				</view>
				<view class="h2">
					请点击“获取手机号”按钮
				</view>
				<!-- <view class="h3">
					也可手动输入手机号，未注册的手机号验证后自动创建账号
				</view> -->
			</view>
			<view class="h2 u-text-center" v-show="form.openid == ''">
				<u-loading mode="circle" :size="100"></u-loading>
				<view class="u-m-t-30">
					正在登录
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="centerbox">
			<!-- #ifdef H5 -->
			<view class="loginbox" v-show="formtype == 'login'">
				<u-form :model="form" ref="form" :border-bottom="true" :label-width="120">
					<u-form-item label="手机号" prop="mobile" :required="true"><u-input type="number" v-model="form.mobile" placeholder="请输入手机号" @input="setCaptcha" /></u-form-item>
					<u-form-item label="图形验证码" prop="captchaCode" label-width="180" :required="true" v-if="form.mobile.length==11">
						<view class="u-flex">
							<u-input type="text" v-model="form.captchaCode" placeholder="请输入验证码" />
							<image class="captcha" :src="captcha" mode="aspectFit" @click="getCaptcha" v-if="form.mobile.length==11"></image>
						</view>
					</u-form-item>
					<u-form-item label="短信验证码" prop="smsCode" label-width="180" :required="true" v-if="form.registerMethod==10">
						<view class="u-flex">
							<u-input type="number" v-model="form.smsCode" placeholder="请输入验证码" />
							<u-button shape="circle" :ripple="true" hover-class="none" type="default" :hair-line="false" size="mini" @click="sendSms">发送验证码</u-button>
						</view>
					</u-form-item>
					<u-form-item label="密码" prop="password" :required="true" v-if="form.registerMethod==20"><u-input type="password" v-model="form.password" placeholder="请输入密码" /></u-form-item>
				</u-form>
			</view>
			<view class="loginbox" v-show="formtype == 'register'">
				<u-form :model="form" ref="form" :border-bottom="true" :label-width="150">
					<u-form-item label="昵称" prop="nick_name" :required="true">
						<u-input type="text" v-model="form.nick_name" placeholder="请输入昵称" />
					</u-form-item>
					<u-form-item label="手机号" prop="mobile" :required="true"><u-input type="number" v-model="form.mobile" placeholder="请输入手机号" @input="setCaptcha" /></u-form-item>
					<u-form-item label="图形验证码" prop="captchaCode" label-width="180" :required="true" v-if="form.mobile.length==11">
						<view class="u-flex">
							<u-input type="number" v-model="form.captchaCode" placeholder="请输入验证码" />
							<image class="captcha" :src="captcha" mode="aspectFit" @click="getCaptcha" v-if="form.mobile.length==11"></image>
						</view>
					</u-form-item>
					<u-form-item label="短信验证码" prop="smsCode" label-width="180" :required="true">
						<view class="u-flex">
							<u-input type="number" v-model="form.smsCode" placeholder="请输入验证码" />
							<u-button shape="circle" :ripple="true" hover-class="none" type="default" :hair-line="false" size="mini" @click="sendSms">发送验证码</u-button>
						</view>
					</u-form-item>
					<u-form-item label="密码" prop="password" :required="true"><u-input type="password" v-model="form.password" placeholder="请输入密码" /></u-form-item>
					<u-form-item label="确认密码" prop="repassword" :required="true"><u-input type="repassword" v-model="form.repassword" placeholder="请输入确认密码" /></u-form-item>
				</u-form>
			</view>
			<view class="agreement u-m-t-30">
				<u-checkbox-group>
					<u-checkbox 
						v-model="form.is_agreement"
						name="is_agreement"
						:active-color="appTheme.mainBg"
						label-size="22"
						size="28"
					>阅读并同意<text class="col-m" @click="toAgreement('user')">《用户协议》</text>与<text class="col-m" @click="toAgreement('privacy')">《隐私协议》</text></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="loginbox" v-show="form.openid != ''">
				<u-form :model="form" ref="form" :border-bottom="true" :label-width="120">
					<u-form-item label="手机号" prop="mobile" :required="true">
						<view class="u-flex">
							<u-input type="number" v-model="form.mobile" placeholder="请输入手机号" :disabled="wxmobile==''?false:true" @input="setCaptcha" />
							<u-button shape="circle" :ripple="true" hover-class="none" type="default" :hair-line="false" size="mini" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</u-button>
						</view>
					</u-form-item>
					<u-form-item label="昵称" prop="nick_name" :required="true">
						<u-input type="number" v-model="form.nick_name" placeholder="请输入昵称" />
					</u-form-item>
					<!-- <u-form-item label="图形验证码" prop="captchaCode" label-width="180" :required="true" v-if="wxmobile=='' && form.mobile!='' && form.mobile.length==11">
						<view class="u-flex">
							<u-input type="number" v-model="form.captchaCode" placeholder="请输入验证码" />
							<image class="captcha" :src="captcha" mode="aspectFit" @click="getCaptcha" v-if="form.mobile.length==11"></image>
						</view>
					</u-form-item>
					<u-form-item label="短信验证码" prop="smsCode" label-width="180" :required="true" v-if="wxmobile=='' && form.mobile!=''">
						<view class="u-flex">
							<u-input type="number" v-model="form.smsCode" placeholder="请输入验证码" />
							<u-button shape="circle" :ripple="true" hover-class="none" type="default" :hair-line="false" size="mini" @click="sendSms">发送验证码</u-button>
						</view>
					</u-form-item> -->
				</u-form>
			</view>
			<view class="agreement" v-show="form.openid != ''">
				<u-checkbox-group>
					<u-checkbox 
						v-model="form.is_agreement"
						name="is_agreement"
						:active-color="appTheme.mainBg"
						label-size="22"
						size="28"
					>阅读并同意<text class="col-m" @click="toAgreement('user')">《用户协议》</text>与<text class="col-m" @click="toAgreement('privacy')">《隐私协议》</text></u-checkbox>
				</u-checkbox-group>
			</view>
			<!-- #endif -->
		</view>
		<view class="btnbox">
			<!-- #ifdef MP-WEIXIN -->
			<u-button shape="circle" :ripple="true" hover-class="none" :custom-style="{backgroundColor:appTheme.mainBg,color:appTheme.mainFg}" @click="login" v-show="form.openid != ''">登录</u-button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<u-button shape="circle" :ripple="true" hover-class="none" :custom-style="{backgroundColor:appTheme.mainBg,color:appTheme.mainFg}" @click="login">{{ formtype=='login'?'登录':'注册' }}</u-button>
			<u-button shape="circle" :ripple="true" hover-class="none" type="default" :hair-line="false" class="u-m-t-30" @click="formtype = (formtype=='login'?'register':'login')">{{ formtype=='login'?'注册':'登录' }}</u-button>
			<!-- #endif -->
			<view :style="{height:bottom+'px'}"></view>
		</view>
	</view>
</template>

<script>
	import * as LoginApi from '@/api/login.js'
	import store from '@/store'
	export default {
		data() {
			return {
				currentMethod: 0,
				formtype: 'login',
				form: {
					registerMethod: 20,
					nick_name: '',
					// #ifdef H5
					mobile: '18866668888',
					password: '123456',
					// #endif
					// #ifdef MP-WEIXIN
					mobile: '',
					password: '',
					// #endif
					repassword: '',
					openid: '',
					captchaCode: '',
					smsCode: '',
					is_agreement: false
				},
				wxmobile: '',
				captcha: '',
				bottom: 0
			}
		},
		onLoad() {
			let app = this
			let timer = setInterval(() => {
				if(app.appSetting.apiurl){
					app.getCaptcha()
					app.form.registerMethod = app.appSetting.register.registerMethod
					if(app.form.registerMethod == 20){
						app.currentMethod = 0
					}else{
						app.currentMethod = 1
					}
					clearInterval(timer);
				}
			}, 500);
			let info = uni.getSystemInfo({
				success(data) {
					app.bottom = data.safeAreaInsets.bottom
				}	
			})
			// #ifdef MP-WEIXIN
			uni.login({
				success: (res) => {
					store.dispatch('LoginMpWx', res).then(result => {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						// 跳转回原页面
						setTimeout(() => uni.navigateBack(), 2000)
					}).catch(result => {
						app.form.openid = result.openid
					})
				}
			})
			// #endif
		},
		methods: {
			getCaptcha() {
				if(this.form.mobile.length==11 && this.wxmobile==''){
					this.captcha = this.appSetting.apiurl+'passport/verify?mobile='+this.form.mobile+'&r='+Math.ceil(Math.random()*1000)
				}
			},
			setCaptcha(mobile) {
				if(mobile.length==11 && this.wxmobile==''){
					this.captcha = this.appSetting.apiurl+'passport/verify?mobile='+mobile+'&r='+Math.ceil(Math.random()*1000)
				}
			},
			changeMethod(e) {
				if(e == 0){
					this.form.registerMethod = 20
				}else{
					this.form.registerMethod = 10
				}
			},
			sendSms() {
				if(this.form.mobile=='' || this.form.mobile.length<11){
					uni.showToast({
						title: '请填写正确的手机号',
						icon: 'none'
					})
					return false
				}
				if(this.form.captchaCode == ''){
					uni.showToast({
						title: '请填写图形验证码',
						icon: 'none'
					})
					return false
				}
				LoginApi.sendSms({
					captchaCode: this.form.captchaCode,
					mobile: this.form.mobile
				}).then(data => {
					uni.showToast({
						title: '发送成功',
						icon: 'none'
					})
				}).catch(() => {
					uni.showToast({
						title: '发送失败',
						icon: 'error'
					})
				})
			},
			getPhoneNumber(e){
				let app = this
				if(e.detail.code){
					store.dispatch('LoginMpWxMobile', e.detail).then(result => {
						app.form.mobile = result.mobile
						app.wxmobile = result.mobile
					}).catch(() => {
						uni.showToast({
							title: '获取手机号失败',
							icon: 'error'
						})
					})
				}
			},
			toAgreement(name) {
				uni.navigateTo({
					url: "/pages/my/agreement?name="+name
				})
			},
			login() {
				if(this.form.mobile == ''){
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					});
					return false
				}
				// #ifdef H5
				if(this.form.password == ''){
					uni.showToast({
						title: '请填写密码',
						icon: 'none'
					});
					return false
				}
				// #endif
				// #ifdef MP-WEIXIN
				if(this.form.nick_name == ''){
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					});
					return false
				}
				// #endif
				if(!this.form.is_agreement){
					uni.showToast({
						title: '请阅读并同意《用户协议》与《隐私协议》',
						icon: 'none'
					});
					return false
				}
				let app = this;
				store.dispatch('Login', this.form).then(result => {
					uni.showToast({
						title: this.formtype=='login'?'登录成功':'注册成功',
						icon: 'success'
					})
					// 跳转回原页面
					setTimeout(() => uni.navigateBack(), 2000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
	}
	.logintop {
		background-color: $main-bg;
		width: 100vw;
		padding-bottom: 50rpx;
	}
	.centerbox {
		min-height: 50vh;
		width: 100%;
	}
	.h1 {
		padding: 40rpx 35rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: $main-fg;
	}
	.h2 {
		padding: 0 40rpx 10rpx;
		font-size: 32rpx;
		color: $main-fg;
	}
	.h3 {
		padding: 0 40rpx 35rpx;
		font-size: 24rpx;
		color: $main-fg;
	}
	.loginbox {
		margin: 30rpx;
		margin-top: -30rpx;
		padding: 0 40rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		overflow: hidden;
	}
	.agreement {
		padding: 0 40rpx 35rpx;
		font-size: 22rpx;
		text-align: center;
	}
	.btnbox {
		padding: 30rpx;
		width: 100vw;
		box-sizing: border-box;
	}
	.captcha {
		width: 200rpx;
		height: 62rpx;
	}
</style>
